<template>
  <div 
		class="scene-wrap" 
		ref="sceneDom"
		:style="{width: innerWidth+'px',height: innerHeight+'px'}"
	></div>
</template>

<script setup lang="ts">
import path from 'pathe'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { useCommonStore } from '@/stores/common'
import { ThreeBasic } from '@/utils/three'
const { innerWidth, innerHeight } = storeToRefs(useCommonStore())

const sceneDom = ref<any>(null)
let camera:THREE.Camera, 
scene:THREE.Scene, 
controls:OrbitControls,
threeBasic:ThreeBasic

const init = () => {
  threeBasic = new ThreeBasic({
    dom: sceneDom.value,
    innerWidth: innerWidth.value,
    innerHeight: innerHeight.value,
    cameraConfig: {
      fov: 45,
      aspect: innerWidth.value / innerHeight.value,
      near: 0.1,
      far: 100,
      position: {
        x: 1.5,
        y: 4,
        z: 9
      },
    }
  })
	scene = threeBasic.scene
	camera = threeBasic.camera
  camera.lookAt( 0, 0, 0 )
  controls = threeBasic.controls
  // controls.addEventListener( 'change', threeBasic.render )
  controls.target.set( 0, 2, 0 )

  //

  const dracoLoader = new DRACOLoader()
  dracoLoader.setDecoderPath( path.join('/node_modules/three/examples/jsm/libs/draco/gltf/') )

  const loader = new GLTFLoader()
  loader.setDRACOLoader( dracoLoader )
  loader.setPath( path.resolve('static/models/') )
  loader.load('/forest_house.glb', ( gltf ) => {
    scene.add( gltf.scene )
	}, (xhr) => {
    const percent = xhr.loaded / xhr.total * 100
    console.log(percent + '% loaded');
  } )
  // loader.load('/BoomBox.glb', ( gltf ) => {
  //   scene.add( gltf.scene )
	// } )

}


onMounted(()=>{
	init()
  threeBasic.render()
  window.addEventListener('resize', () => {
    threeBasic.resize(innerWidth.value, innerHeight.value)
  })

})
onUnmounted(()=>{
  threeBasic.dispose()
})

</script>

<style lang="scss" scoped>
.scene-wrap {
  display: block;
	background-color: var(--vt-c-white);
}
</style>